html {
  box-sizing: border-box;
  font-size: 16px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*::before, *::after {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  background-color: #ccc;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
  padding: 10px;
}
.wrapper .col {
  display: inline-flex;
  width: 4rem;
  height: 4rem;
  align-items: center;
  justify-content: center;
}
.wrapper .col .icon-comment {
  width: 2rem;
  height: 2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath d='M144 208c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm112 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm112 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zM256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z'%3E%3C/path%3E %3C/svg%3E") no-repeat center/100%;
  font-size: 0;
}
.wrapper .col sup {
  position: absolute;
  box-sizing: border-box;
  min-width: 1rem;
  padding: 0 0.2875rem;
  color: #fff;
  font-size: min(0.75rem, 10000px - var(--num) * 100px);
  line-height: 1.3;
  text-align: center;
  background-color: #eb4646;
  border: 1px solid #fff;
  border-radius: 1rem;
  transform: translate(calc(40% + 0.375rem), -0.75rem);
  opacity: var(--num);
}
.wrapper .col sup::before {
  content: "99+";
  font-size: min(0.75rem, var(--num) * 100px - 9900px);
}